<template>
  <div>
    <div class="zichan-msg-1">
      <div class="zichan-msg-1-1">{{Amount}} (USDT)</div>
      <div class="zichan-msg-1-2">{{props.queryPledge}}</div>
    </div>
    <div class="zichan-msg-2-1">
      <div class="zichan-msg-2"  @click="dialogToggleCashOut">
        {{WithdrawCoinsCashAccount}}
      </div>
    </div>

    <div class="zichan-msg-2-1">
      <div class="zichan-msg-2" @tap="dialogTogglePledge"  >
        {{CashAccount}}
      </div>
    </div>

    <div class="zichan-msg-2-1">
      <div class="zichan-msg-2" @tap="dialogToggleZhuanZeng"  >
        {{Transfer}}
      </div>
    </div>


    <div class="zichan-msg-2-1-1">
      <div>{{teBie}}</div>
      <div>{{zengShou}}</div>
      <div>{{zhuaZen}}</div>
      <div>{{feiYong}}</div>
    </div>

<!--    提幣金額-->
    <uni-popup ref="dialogMsgCashOut" type="dialog" @touchmove.stop.prevent="moveHandle" :is-mask-click="false">
      <div class="recharage-1">
        <div class="recharage-1-2">
          <div class="recharage-1-1">{{WithdrawCoinsCashAccount}}</div>
        </div>

        <div  class="recharage-4-1">
          <div class="recharage-4">
            <div class="recharage-4-2">
              {{Amount}}
            </div>
            <div class="recharage-4-3">
              <el-input v-model.number="queryUSDTNum" class="recharage-4-4-1" :placeholder="cancelEn"></el-input>
            </div>
            <div style="height: 10vw"></div>
          </div>

        </div>

        <div  class="recharage-5-1">
          <div class="recharage-5">
            <div class="recharage-5-1-1" @tap="dialogCloseCashOutBtn">
              {{cancel}}
            </div>
            <div class="recharage-5-1-2" @tap="dialogConfirmCashOutBtn">
              {{confirm}}
            </div>
          </div>
        </div>
        <div style="height: 10vw"></div>
      </div>
    </uni-popup>

<!--    質押金額-->
    <uni-popup ref="dialogMsgPledge" type="dialog" @touchmove.stop.prevent="moveHandleZhiYa" :is-mask-click="false">
      <div class="recharage-1">
        <div class="recharage-1-2">
          <div class="recharage-1-1">{{WithdrawCoinsCashAccount}}</div>
        </div>

        <div  class="recharage-4-1">
          <div class="recharage-4">
            <div class="recharage-4-2">
              {{Amount}}
            </div>
            <div class="recharage-4-3">
              <el-input v-model.number="queryUSDTNumZhiYa" class="recharage-4-4-1" :placeholder="cancelEn"></el-input>
            </div>
            <div style="height: 10vw"></div>
          </div>
        </div>

        <div  class="recharage-5-1">
          <div class="recharage-5">
            <div class="recharage-5-1-1" @tap="dialogClosePledgeBtn">
              {{cancel}}
            </div>
            <div class="recharage-5-1-2" @tap="dialogConfirmPledgeBtn">
              {{confirm}}
            </div>
          </div>
        </div>
        <div style="height: 10vw"></div>
      </div>
    </uni-popup>

<!--    转赠-->
    <uni-popup ref="dialogMsgZhuanZeng" type="dialog" @touchmove.stop.prevent="moveHandleZhuanZeng"  :is-mask-click="false">
      <div class="recharage-1">
        <div class="recharage-1-2">
          <div class="recharage-1-1">转赠</div>
        </div>

        <div  class="recharage-4-1">
          <div class="recharage-4">
            <div class="recharage-4-2">
              钱包地址
            </div>
            <div class="recharage-4-3">
              <el-input v-model="formData.wallet_addr" class="recharage-4-4-1"></el-input>
            </div>

            <div class="recharage-4-2">
              转增金额
            </div>
            <div class="recharage-4-3">
              <el-input v-model="formData.amount" class="recharage-4-4-1"></el-input>
            </div>
            <div style="height: 10vw"></div>

          </div>
        </div>


        <div  class="recharage-5-1">
          <div class="recharage-5">
            <div class="recharage-5-1-1" @tap="closeDialogMsgZhuanZeng" >
              {{cancel}}
            </div>
            <div class="recharage-5-1-2" @tap="submitDialogMsgZhuanZeng">
              {{confirm}}
            </div>
          </div>
        </div>
        <div style="height: 10vw"></div>
      </div>
    </uni-popup>


  </div>
</template>
<script setup>
import { ref,defineEmits, defineProps, watch, computed, reactive,onUnmounted } from 'vue';
import { MyStaking ,MyStakingPledge,MyPledgeTransferFriend} from '@/api/zichan';
import {onShow} from "@dcloudio/uni-app";
let props = defineProps({
  queryPledge:{
    type:Number,
    default:0
  }
})
let emit = defineEmits(['dialogRechargeMsg'])
let queryUSDTNum = ref(null);
let query = reactive({})
let formData = reactive({
  wallet_addr:'',
  amount:''
})

let queryUSDTNumZhiYa = ref(null);
let queryZhiYa = reactive({})

//提现
let dialogMsgCashOut = ref(null);
//质押
let dialogMsgPledge = ref(null);
let dialogMsgZhuanZeng = ref(null);

let cancel = ref('取消');
let confirm = ref('确定');
let cancelEn = ref('请输入100的整数倍');
let Amount = ref('余額')
let WithdrawCoinsCashAccount = ref('提幣到現金賬户')
let CashAccount = ref('質押')
let Transfer = ref('轉贈')
let teBie = ref('特别提醒:')
let zengShou = ref('1.赠受双方需预先在本平台登录过，才能完成转赠功能；')
let zhuaZen = ref('2.转赠一经确认完成，不可撤回、不可取消，平台不对转赠行为承担其他任何担保责任 ，也不接受任何要求撤回或取消已经完成转赠的申请；')
let feiYong = ref('3.受赠双方无需向平台支付任何费用；')

const moveHandle = (e) => {
  return false
}
const moveHandleZhiYa = (e) => {
  return false
}
const moveHandleZhuanZeng = (e) => {
  return false
}
/*
* 提现
* */
const dialogToggleCashOut = ()=>{
  dialogMsgCashOut.value.open();
}
const dialogConfirmCashOutBtn = ()=>{
  if(queryUSDTNum.value % 100 === 0){
    queryUSDTNum.value = queryUSDTNum.value;
    query = Object.assign(query,{amount:queryUSDTNum.value})
    MyStaking(query).then(res=>{
      if(res.data.code === 200){
        uni.showToast({
          icon: 'success',
          duration: 2000
        });
      }else{
        uni.showToast({
          icon: 'error',
        })
      }
    }).catch(error=>{

    })
  }else{
    queryUSDTNum.value = null;
    return
  }
  closeDialogMsgCashOut();
}
const dialogCloseCashOutBtn = ()=>{
  closeDialogMsgCashOut();
}

const closeDialogMsgCashOut=()=>{
  emit('dialogRechargeMsg')
  dialogMsgCashOut.value.close();
  queryUSDTNum.value = null;
}

const dialogToggleZhuanZeng = ()=>{
  dialogMsgZhuanZeng.value.open();
}
const submitDialogMsgZhuanZeng = ()=>{
  MyPledgeTransferFriend(formData).then(res=>{
    if(res.data.code == 200){
      uni.showToast({
        title:res.data.msg,
        icon: 'success',
        duration: 2000
      });
    }else{
      uni.showToast({
        title:res.data.msg,
        icon: 'error',
      })
    }
  }).catch(err=>{})
  closeToggleZhuanZeng();
}
const closeDialogMsgZhuanZeng=()=>{
  closeToggleZhuanZeng();
}
const closeToggleZhuanZeng = ()=>{
  emit('dialogRechargeMsg')
  dialogMsgZhuanZeng.value.close();
  formData = reactive({
    wallet_addr:'',
    amount:''
  })
}
/*
* 质押 Pledge
* */

const dialogTogglePledge = ()=>{
  dialogMsgPledge.value.open();
}
const dialogConfirmPledgeBtn = ()=>{
  if(queryUSDTNumZhiYa.value % 100 === 0){
    queryUSDTNumZhiYa.value = queryUSDTNumZhiYa.value;
    queryZhiYa = Object.assign(query,{amount:queryUSDTNumZhiYa.value})
    MyStakingPledge(queryZhiYa).then(res=>{
      if(res.data.code === 200){
        uni.showToast({
          icon: 'success',
          duration: 2000
        });
      }else{
        uni.showToast({
          icon: 'error',
        })
      }
    }).catch(error=>{

    })
  }else{
    queryUSDTNumZhiYa.value = null;
    return
  }
  closeDialogMsgPledge();
}
const dialogClosePledgeBtn = ()=>{
  closeDialogMsgPledge();
}

const closeDialogMsgPledge=()=>{
  emit('dialogRechargeMsg')
  dialogMsgPledge.value.close();
  queryUSDTNumZhiYa.value = null;
}



onShow(()=>{
  const lang = uni.getStorageSync('LANG_KEY')
  if(lang === '中文'){
    cancel.value = '取消';
    confirm.value = '确定';
    cancelEn.value = '请输入100的整数倍';
    Amount.value = '余额'
    WithdrawCoinsCashAccount.value = '提币到现金账户'
    CashAccount.value = '质押';
    Transfer.value = '轉贈';
    teBie.value = '特别提醒:'
    zengShou.value = '1.赠受双方需预先在本平台登录过，才能完成转赠功能；'
    zhuaZen.value = '2.转赠一经确认完成，不可撤回、不可取消，平台不对转赠行为承担其他任何担保责任 ，也不接受任何要求撤回或取消已经完成转赠的申请；'
    feiYong.value = '3.受赠双方无需向平台支付任何费用；'
  }
  if(lang === 'Eng'){
    cancel.value = 'Cancel';
    confirm.value = 'Confirm';
    cancelEn.value = 'Please enter an integer multiple of 100';
    Amount.value = 'Amount'
    WithdrawCoinsCashAccount.value = 'Withdraw Coins Cash Account'
    CashAccount.value = 'Cash Account'
    Transfer.value = 'Transfer';
    teBie.value='Special reminder:'
    zengShou.value='1. Both parties must have logged in to this platform in advance to complete the gift transfer function. '
    zhuaZen.value = 'Once the transfer is confirmed to be completed, it is irrevocable and cannot be cancelled. The platform does not assume any other guarantee responsibility for the transfer, nor does it accept any request to withdraw or cancel the completed transfer'
    feiYong.value='3. Both recipients do not need to pay any fees to the platform; '

  }
  if (lang === '日本語'){
    cancel.value = 'キャンセル';
    confirm.value = '確認';
    cancelEn.value = '100入金先住所を入力してください';
    Amount.value = '残高'
    WithdrawCoinsCashAccount.value = '現金口座に出金'
    CashAccount.value = '質押'
    Transfer.value = 'プレゼント'
    teBie.value='特別注意事項：'
    zengShou.value='1.贈与双方は事前に当プラットフォームに登録してから、贈与機能を完成することができる;'
    zhuaZen.value='2.転送が完了したことを確認すると、取り下げることはできず、取り消すことはできず、プラットフォームは転送行為に対して他の保証責任を負わず、転送が完了した申請の撤回や取り消しを要求することも受け入れない。'
    feiYong.value='3.贈与された双方はプラットフォームにいかなる費用を支払う必要はありません;'
  }
  if (lang === '한국어'){
    cancel.value = '취소';
    confirm.value = '확인';
    cancelEn.value = '100의 정수 배를 입력하십시오.';
    Amount.value = '잔액'
    WithdrawCoinsCashAccount.value = '현금 계좌 를 이체 하다'
    CashAccount.value = '이체 하다'
    Transfer.value = '증여'
    teBie.value ='특별 알림:'
    zengShou.value ='1. 증정 쌍방은 사전에 본 플랫폼에 로그인해야만 증정 기능을 완성할 수 있습니다.'
    zhuaZen.value ='2. 증여가 확인되면 철회할 수 없고 취소할 수 없으며 플랫폼은 증여 행위에 대해 기타 어떠한 담보 책임을 지지 않으며 이미 완료된 증여를 철회하거나 취소할 것을 요구하는 어떠한 신청도 받아들이지 않는다.'
    feiYong.value ='3. 증정받은 쌍방은 플랫폼에 어떠한 비용도 지불할 필요가 없다.'
  }
})


</script>

<style scoped>

.zichan-msg-2-1-1{
  width: 90%;
  margin: 0 auto;
  padding-top: 100px;
  color: #467CD1;
  box-sizing: border-box;
  font-size: 12px;
}
.recharage-4-4-1{
  width: 90%;
}
:deep(.el-input__wrapper){
  background-color: #F8F8F8;
  border-radius: 2px;
  color: #FFFFFF;
  box-shadow: 0px 0px 0px 0px; /* 边框颜色 */
}
:deep(.el-input__inner){
  color: #000000;
  box-shadow: 0px 0px 0px 0px; /* 边框颜色 */
}
.recharage-1{
  width: 80vw;
  height:auto;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 10px;
}
.recharage-1-1{
  font-size: 18px;
  font-weight: bolder;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.recharage-1-2{
  padding-top: 15px;
  box-sizing: border-box;
}
.recharage-2{
  font-size: 12px;
  width: 90%;
  margin: 0 auto;
  color: #A9A9A9;
}
.recharage-4-2{
  font-size: 16px;
  width: 90%;
  margin: 0 auto;
  color: #FFFFFF;
  padding-top: 15px;
  box-sizing: border-box;
}
.recharage-4-3{
  font-size: 16px;
  padding-top: 30px;
  box-sizing: border-box;
  text-align: center;
  color: #FFFFFF;
}
.recharage-4-4{
  font-size: 22px;
  color: #FFFFFF;
  margin: 0 10px;
}
.recharage-3{
  font-size: 12px;
  width: 90%;
  margin: 0 auto;
  color: #A9A9A9;
  height: 50px;
  line-height: 50px;
  //background: #EBEBEB;
  //border-radius: 10px;
  text-align: center;
  border-top: 1px solid #E4E4E4;
  border-bottom: 1px solid #E4E4E4;
}
.recharage-3-1{
  margin-top: 10px;
}
.recharage-4-1{
  margin-top: 20px;
  color: #FFFFFF;
}
.recharage-4{
  background-image:url("../../../static/jiaoyi/zichan/10.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 12px;
  width: 90%;
  margin: 0 auto;
  height: auto;
  //background: #EBEBEB;
  border-radius: 10px;
}
.recharage-5{
  display: flex;
  justify-content: space-evenly;

}
.recharage-5-1{
  margin-top: 20px;
}
.recharage-5-1-1{
  width: 43%;
  text-align: center;
  color: #000000;
  background: #EBEBEB;
  height: 45px;
  line-height: 45px;
  border-radius: 10px;
}
.recharage-5-1-2{
  color: #FFFFFF;
  text-align: center;
  width: 43%;
  background: #2A54A0;
  height: 45px;
  line-height: 45px;
  border-radius: 10px;
}
.zichan-msg-1{
  background-image: url("../../../static/jiaoyi/zichan/3.png");
  background-repeat: no-repeat; /* 背景图片是否重复 */
  background-position: center; /* 背景图片的位置 */
  background-size: cover; /* 背景图片的尺寸，cover表示覆盖整个元素，不留空白 */
  width: 90%; /* 或其他尺寸 */
  height: 18vh; /* 或其他尺寸 */
  border-radius: 10px;
  margin: 0 auto;
  color: #FFFFFF;
}
.zichan-msg-1-1{
  font-size: 16px;
  padding:30px;
  box-sizing: border-box;
}
.zichan-msg-1-2{
  font-size: 16px;
  padding-left:30px;
  box-sizing: border-box;
}
.zichan-msg-2-1{
  margin-top: 40px;
}

.zichan-msg-2{
  background-color: #FFFFFF;
  width: 90%;
  height: 45px;
  line-height: 45px;
  margin: 0 auto;
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
}


</style>